<template>
	<view class="detail">
		<!-- 默认显示 -->
		<view class="head"><view class="editBtn" @tap="editBtnClick">编辑用户信息</view></view>
		<view class="row avatar">
			<view class="lable">头像</view>
			<image :src="userInfo.icon" mode="" v-if="!isEdit"></image>
			<view class="uploadBtn" v-else @tap="upload">上传头像</view>
		</view>
		<view class="row">
			<view class="lable">用户名</view>
			<view class="value">{{ userInfo.username }}</view>
		</view>
		<view class="row">
			<view class="lable">昵称</view>
			<view class="value" v-if="!isEdit">{{ userInfo.nickname }}</view>
			<input v-model="userInfo.nickname" v-else />
		</view>
		<view class="row">
			<view class="lable">手机</view>
			<view class="value" v-if="!isEdit">{{ userInfo.phone }}</view>
			<input v-model="userInfo.phone" v-else />
		</view>
		<view class="btns">
			<view class="updateBtn" v-if="isEdit" @tap="handleUpdate">更新</view>
			<view class="logoutBtn" v-else @tap="handleLogout">退出登录</view>
		</view>
	</view>
</template>

<script>
import { updateMemberInfo, uploadAvatar } from '../../../api/mine/index.js';
import baseUrl from '../../../api/config.js';
export default {
	data() {
		return {
			userInfo: {},
			isEdit: false
		};
	},
	methods: {
		// 编辑按钮
		editBtnClick() {
			this.isEdit = !this.isEdit;
		},
		// 更新
		async handleUpdate() {
			console.log(this.userInfo);
			const res = await updateMemberInfo(this.userInfo);
			console.log(res);
			if (res.success) {
				uni.showToast({
					title: '更新成功! 请重新登录'
				});
				setTimeout(() => {
					uni.clearStorage();
					uni.navigateTo({
						url: '../../login/login'
					});
				}, 1000);
			}
		},
		// 退出登录
		handleLogout() {
			uni.clearStorage();
			uni.showToast({
				title: '退出登录成功'
			});
			setTimeout(() => {
				uni.navigateTo({
					url: '../../login/login'
				});
			}, 1000);
		},
		// 上传头像
		upload() {
			const that = this;
			// 1.先调用uni.chooseImage()接口选择图片
			uni.chooseImage({
				count: 1, // 选择几张图片
				sizeType: [],
				success(res) {
					console.log(res);
					const uploadFile = res.tempFilePaths[0];
					console.log('file:', uploadFile);
					// 2.调用上传接口
					uni.uploadFile({
						url: baseUrl + `/lejuClient/login/uploadAvatar`,
						filePath: uploadFile,
						name: 'file',
						success(uploadResp) {
							const data = JSON.parse(uploadResp.data);
							if (data.success) {
								that.userInfo.icon = data.data.fileUrl;
							}
							console.log(that.userInfo);
						}
					});
				}
			});
		}
	},
	onLoad() {
		this.userInfo = uni.getStorageSync('userinfo');
	}
};
</script>

<style lang="scss" scoped>
.detail {
	.head {
		display: flex;
		justify-content: flex-end;
	}
	.editBtn,
	.uploadBtn {
		width: fit-content;
		height: 60rpx;
		padding: 0 40rpx;
		line-height: 60rpx;
		text-align: center;
		margin: 40rpx;
		border-radius: 12rpx;
		border: 1rpx solid #999;
	}
	.uploadBtn {
		margin: 0;
	}
	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		height: 126rpx;
		font-size: 32rpx;
		border-bottom: 1rpx solid #e5e5e5;
		.lable {
			color: #494949;
		}
		.value {
			color: #a1a1a1;
		}
		input {
			text-align: right;
		}
	}
	.avatar {
		height: 176rpx !important;
		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
	}
	.btns {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 200rpx;
		view {
			width: 368rpx;
			height: 88rpx;
			color: #fff;
			text-align: center;
			line-height: 88rpx;
			background: #1c4b47;
			border-radius: 16rpx;
		}
	}
}
</style>
